<template>
  <div class="GSupervisionPoliceDetail" :loading="loading">
    <zyInfoPanel title="基本信息" :showUnfoldButton="false" class="baseInfo">
      <div class="baseBox">
        <zy-modal-info :model-info="baseInfo" cell-num="4"></zy-modal-info>
      </div>
    </zyInfoPanel>
    <zyInfoPanel title="所属辖区" :showUnfoldButton="false" class="baseInfo">
      <zy-button slot="title" @click="add('1')" v-if="type=='modify'||type=='add'">增加</zy-button>
      <el-table :data="rTableData">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="regulated_name" label="辖区名称"></el-table-column>
        <el-table-column prop="regulated_mobile" label="联系电话"></el-table-column>
        <el-table-column prop="regulated_address" label="辖区地址"></el-table-column>
        <el-table-column prop="remark" label="备注"></el-table-column>
        <el-table-column label="操作" v-if="type=='modify'||type=='add'" width="100">
          <template slot-scope="scope">
            <zy-button type="warring" @click="deleted(scope.row,'1')" mini text-button>移除</zy-button>
          </template>
        </el-table-column>
      </el-table>
    </zyInfoPanel>
    <zyInfoPanel title="监管物流企业" :showUnfoldButton="false" class="baseInfo">
      <zy-button slot="title" @click="add('2')" v-if="type=='modify'||type=='add'">增加</zy-button>
      <el-table :data="eTableData">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="company_name" label="企业名称"></el-table-column>
        <el-table-column prop="company_type_desc" label="企业类型"></el-table-column>
        <el-table-column prop="organization_code" label="统一社会信用代码"></el-table-column>
        <el-table-column prop="legal_person" label="法人姓名"></el-table-column>
        <el-table-column prop="legal_phone" label="法人联系方式"></el-table-column>
        <el-table-column prop="legal_card_no" label="法人身份证号"></el-table-column>
        <el-table-column label="操作" v-if="type=='modify'||type=='add'" width="100">
          <template slot-scope="scope">
            <zy-button type="warring" @click="deleted(scope.row,'2')" mini text-button>移除</zy-button>
          </template>
        </el-table-column>
      </el-table>
    </zyInfoPanel>
    <zyInfoPanel title="监管合作站点" :showUnfoldButton="false" class="baseInfo">
      <zy-button slot="title" @click="add('3')" v-if="type=='modify'||type=='add'">增加</zy-button>
      <el-table :data="cTableData">
        <el-table-column type="index" label="序号" width="70"></el-table-column>
        <el-table-column prop="company_name" label="合作站点名称"></el-table-column>
        <el-table-column prop="organization_code" label="统一社会信用代码"></el-table-column>
        <el-table-column prop="legal_person" label="法人姓名"></el-table-column>
        <el-table-column prop="legal_phone" label="法人联系方式"></el-table-column>
        <el-table-column prop="legal_card_no" label="法人身份证号"></el-table-column>
        <el-table-column v-if="type=='modify'||type=='add'" label="操作" width="100">
          <template slot-scope="scope">
            <zy-button type="warring" @click="deleted(scope.row,'3')" mini text-button>移除</zy-button>
          </template>
        </el-table-column>
      </el-table>
    </zyInfoPanel>
    <div class="btnArea">
      <zy-button @click="back">{{type=='detail'?'返回':'取消'}}</zy-button>
      <zy-button type="primary" @click="submit" v-if="type=='modify'||type=='add'">提交</zy-button>
    </div>
    <zyModel :show="show" :title="`增加${modelTitleArr[status]}`" @close="closeModel" @submit="submitModel">
      <div class="model-container">
        <div class="model-box-item">
          <div class="model-item-name">{{modelTitleArr[status]}}</div>
          <div class="model-item-val">
            <el-select class="model-item-select" v-model="select_list" placeholder="请选择" multiple filterable>
              <el-option v-for="option in optionList" :key="option.value" :label="option.label"
                         :value="option.value"></el-option>
            </el-select>
          </div>
        </div>
      </div>
    </zyModel>
  </div>
</template>

<script>
	export default {
		name: "GSupervisionPoliceDetail",
		props: {},
		data() {
			return {
				modelTitleArr: ['', '所属辖区', '监管物流企业', '监管合作站点'],
				show: false,
				baseInfo: [
					{
						title: '民警姓名',
						name: 'sname',
						type: 'input',
						value: '',
						titleClass: 'required'
					},
					{
						title: '联系电话',
						name: 'mobile',
						type: 'input',
						value: '',
						titleClass: 'required'
					},
					{
						title: '警号',
						name: 'cardno',
						type: 'input',
						value: '',
						titleClass: 'required'
					}
				],
				rTableData: [],
				rSelectList: [],
				eTableData: [],
				eSelectList: [],
				cTableData: [],
				cSelectList: [],
				type: '',
				id: '',
				loading: false,
				status: '',
				optionList: [],
				select_list: [],
				rCheckedList: [],
				eCheckedList: [],
				cCheckedList: [],
			};
		},
		computed: {},
		watch: {},
		components: {},
		methods: {
			closeModel() {
				this.show = false;
				this.select_list = [];
				this.rCheckedList = []
				this.eCheckedList = []
				this.cCheckedList = []
			},
			submitModel() {
				let arr = [];
				switch (this.status) {
					case '1':
						this.rSelectList.forEach(item => {
							if (this.select_list.includes(item.regulated_id)) {
								this.rCheckedList.push(item)
							} else {
								arr.push(item)
							}
						})
						this.rSelectList = arr;
						this.rTableData = this.rTableData.concat(this.rCheckedList)
						break;
					case '2':
						this.eSelectList.forEach(item => {
							if (this.select_list.includes(item.company_id)) {
								this.eCheckedList.push(item)
							} else {
								arr.push(item)
							}
						})
						this.eSelectList = arr;
						this.eTableData = this.eTableData.concat(this.eCheckedList)
						break;
					case '3':
						this.cSelectList.forEach(item => {
							if (this.select_list.includes(item.company_id)) {
								this.cCheckedList.push(item)
							} else {
								arr.push(item)
							}
						})
						this.cSelectList = arr;
						this.cTableData = this.cTableData.concat(this.cCheckedList)
						break;
				}
				this.closeModel()
			},
			back(isRefresh) {
				this.$blackRoute({path: '/police_manage', that: this, name: 'GSupervisionPolice', params: {isRefresh}})
			},
			submit() {
				let postData = {id: this.id, addr: '', state: 1}, arr1 = [], arr2 = [], arr3 = [];
				this.baseInfo.forEach(item => {
					if (!item.readonly) {
						if (item.name == 'sname') {
							postData['name'] = item.value;
						} else {
							postData[item.name] = item.value;
						}
					}
				});
				this.rTableData.forEach(item => {
					arr1.push(item.regulated_id)
				})
				this.eTableData.forEach(item => {
					arr2.push(item.company_id)
				})
				this.cTableData.forEach(item => {
					arr3.push(item.company_id)
				})
				postData['regulated_ids'] = arr1.join();
				postData['contact_police_companyids'] = arr2.join();
				postData['cooper_ids'] = arr3.join();
				this.$axios.post(this.$api.g_makeContactPolice, {
					...postData
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.$message.success(msg)
						this.back(true)
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			deleted(data, type) {
				let arr = [];
				switch (type) {
					case '1':
						this.rTableData.forEach(item => {
							if (item.regulated_id == data.regulated_id) {
								this.rSelectList.push(item)
							} else {
								arr.push(item)
							}
						})
						this.rTableData = arr;
						break;
					case '2':
						this.eTableData.forEach(item => {
							if (item.company_id == data.company_id) {
								this.eSelectList.push(item)
							} else {
								arr.push(item)
							}
						})
						this.eTableData = arr;
						break;
					case '3':
						this.cTableData.forEach(item => {
							if (item.company_id == data.company_id) {
								this.cSelectList.push(item)
							} else {
								arr.push(item)
							}
						})
						this.cTableData = arr;
						break;
				}
			},
			add(type) {
				this.status = type;
				this.show = true;
				switch (type) {
					case '1':
						this.optionList = this.rSelectList.filter(item => {
							item.value = item.regulated_id;
							item.label = item.regulated_name
							return item;
						}) || [];
						break;
					case '2':
						this.optionList = this.eSelectList.filter(item => {
							item.value = item.company_id;
							item.label = item.company_name
							return item;
						}) || [];
						break;
					case '3':
						this.optionList = this.cSelectList.filter(item => {
							item.value = item.company_id;
							item.label = item.company_name
							return item;
						}) || [];
						break;
				}
			},
			getData() {
				this.loading = true;
				this.$axios.post(this.$api.listContactPoliceShow, {id: this.id}).then(res => {
					let {code, msg, data} = res;
					this.loading = false
					if (code === 200) {
						this.baseInfo = this.baseInfo.filter(item => {
							if (this.type == 'detail') {
								item.readonly = true;
								item.titleClass = '';
							}
							for (let key in data) {
								if (item.name === key) {
									item.value = data[item.name];
								}
							}
							return item
						});
						let arr = ['物流', '快递', '分拣中心']
						this.eTableData = data.companys.inlinks.filter(item => {
							item.company_type_desc = arr[item.company_type]
							return item;
						}) || [];
						this.cTableData = data.coopers.inlinks;
						this.rTableData = data.regulated.regulated;
						this.eSelectList = data.companys.unlinks.filter(item => {
							item.company_type_desc = arr[item.company_type]
							return item;
						}) || []
						this.cSelectList = data.coopers.unlinks || []
						this.rSelectList = data.regulated.unregulated || []
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.loading = false
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				})
			},
			getRegulatedAreaData() {
				this.loading = true;
				this.tableData = [];
				this.$axios.post(this.$api.g_regulatedList, {
					pagination: {
						page_start: 1,
						page_size: 9999
					}
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						this.rTableData = [];
						this.rSelectList = data.list || []
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
			getEnterpriseData(type) {
				this.loading = true;
				this.tableData = [];
				this.$axios.post(this.$api.g_companyList, {
					company_type: type,
					pagination: {
						page_start: 1,
						page_size: 9999
					}
				}).then(res => {
					let {code, msg, data} = res;
					this.loading = false;
					if (code == 200) {
						let arr = ['物流', '快递', '分拣中心'];
						if(type=='1'){
							this.eTableData=[];
							this.eSelectList = data.list.filter(item => {
								item.type_desc = arr[item.type];
								return item;
							});
            }else{
							this.cTableData=[];
							this.cSelectList = data.list.filter(item => {
								item.type_desc = arr[item.type];
								return item;
							});
            }
					} else {
						this.$message.error(msg);
					}
				}).catch(ret => {
					this.$message.error(ret.msg || '服务繁忙，请稍后再试');
				});
			},
		},
		mounted() {
			this.id = this.$route.query.id;
			this.type = this.$route.query.type;
			if (this.type != 'add') {
				this.getData();
			} else {
				this.getRegulatedAreaData();
				this.getEnterpriseData('1');
				this.getEnterpriseData('2')
			}
		},
		created() {
		}
	}
</script>

<style scoped lang="less" src="@/style/government/personnelManage/supervisionPoliceDetail/index.less">

</style>
